{% extends "base.html" %}
{% load staticfiles %}

{% block title %}环境管理{% endblock %}

{% block content %}
    <!-- 环境新建/修改模态框 -->
    <div class="modal fade" data-backdrop="static" id="modal_enviro_modify" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新建环境</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-top:3%; display: none">
                            <label>环境ID</label>
                            <input class="opts" id="envid" name="envid" type="text"
                                   placeholder="环境ID">
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>环境名称</label> <input class="opts" id="envname" name="envname" type="text"
                                                       placeholder="环境名称">
                            <div id="envname_repeat" class="input-envir"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>服务器地址</label>
                            <input class="opts" id="ip" name="ip" type="text" placeholder="服务器地址">
                            <div id="ip_repeat" class="input-envir"></div>
                        </div>
                        <div style="margin-top:3%"><label>环境类型</label>
                            <select class="opts" id="type" name="type">
                                <option value="1">仿真环境</option>
                                <option value="2">实盘环境</option>
                            </select>
                            <div id="type_repeat" class="input-envir"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>服务器目录</label>
                            <input class="opts" id="runpath" name="runpath" type="text"
                                   placeholder="服务器目录">
                            <div id="runpath_repeat" class="input-envir"></div>
                        </div>
                        <div style="margin-top:3%"><label>主备类型</label>
                            <select class="opts" id="backtype" name="backtype">
                                <option value="1">主服务器</option>
                                <option value="2">备服务器</option>
                            </select>
                            <div id="backtype_repeat" class="input-envir"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>备注</label>
                            <input class="opts" id="remark" name="remark" type="text"
                                   placeholder="备注">
                            <div id="remark_repeat" class="input-envir"></div>
                        </div>
                        <hr/>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                                <span class="btn-cancel btn-stc" onclick="fad_envir_modal()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                                <span class="btn-confirm btn-stc" onclick="sub(gets)">提交</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 环境删除失败提醒 -->
    <div class="modal fade" data-backdrop="static" id="enviro_delete_notice">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">删除失败提醒</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%; display: block">
                        已有策略挂在此环境下，不可删除!
                    </div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:120px; float: left;">
                            <span class="btn-confirm btn-stc" onclick="delete_fad()">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 环境删除确认 -->
    <div class="modal fade" data-backdrop="static" id="modal_enviro_delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">删除环境确认</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%; display: block" id="confirm_env">
                        确认删除该环境？
                    </div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:100px; float: left;">
                            <span class="btn-cancel btn-stc" onclick="delete_fd()">取消</span>
                        </div>
                        <div style="padding-left:5px; float: left;">
                            <span id="del_enviro" sid_enviro="" class="btn-confirm btn-stc"
                                  onclick="delete_enviro()">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 操作成功模态框-->
    <div class="modal fade" data-backdrop="static" id="oper_success">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="success-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="operat-success" id="msg_success">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <body>
    <section>
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active" style="margin-top:10px"><a href="#fa-pack" onclick="tabs(1)"
                                                              data-toggle="tab">环境管理</a></li>
            </ul>
            <div class="tab-content">
                <!--环境列表-->
                <div class="tab-pane active">
                    <div>
                        <div class="div-query">
                            <div class="lbl-query">
                                <button class="btn-add" onclick="envir_model()">新建环境</button>
                            </div>
                            <div class="lbl-query"><span>环境名称</span>
                                <input class="input-query" type="text" id="envnameS">
                            </div>
                            <div class="lbl-query"><span>服务器地址</span>
                                <input class="input-query" type="text" id="envipS">
                            </div>
                            <div class="lbl-query">
                                <span>环境类型</span>
                                <select class="input-query" id="envtypeS">
                                    <option value=""></option>
                                    <option value="1">仿真环境</option>
                                    <option value="2">实盘环境</option>
                                </select></div>
                            <div class="lbl-query">
                                <button class="btn-query" onclick="enviro_search()">查询</button>
                            </div>
                        </div>
                        <table class="table-stc" id="enviroTable">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    </body>
{% endblock %}

{% block scripts %}

    <script type="text/javascript">
        $(function () {
            enviro_search()
        })

        //给服务器目录赋值
        var runpathPaper = '/opt/sumscope/quant_paper/strategies';
        var runpathLive = '/opt/sumscope/quant_live/strategies';

        //新建环境模态框展示
        function envir_model() {
            $('.modal-title').text('新建环境');
            //取消值，取消提示
            $("input").val("");
            $("select").val("");
            $(".input-envir").text("")
            $('#modal_enviro_modify').modal("show");
            $("#type").on("change", function () {
                var envType = $("#type").val()
                if (envType === '1'){
                    $("#runpath").val(runpathPaper)
                } else if (envType === "2") {
                    $("#runpath").val(runpathLive)
                }
            })
        }

        //新建环境模态框取消按钮
        function fad_envir_modal() {
            $('#modal_enviro_modify').modal('hide');

        }


        //环境修改模态框
        function gets() {
            data = {
                'envid': JSON.stringify([$('#envid').val()]),
                'envname': JSON.stringify([$('#envname').val()]),
                'ip': JSON.stringify([$('#ip').val()]),
                'type': JSON.stringify([$('#type').val()]),
                'backtype': JSON.stringify([$('#backtype').val()]),
                'runpath': JSON.stringify([$('#runpath').val()]),
                'remark': JSON.stringify([$('#remark').val()])
            }
            return data;
        }

        //修改环境后提交逻辑
        function sub(func) {
            data = func();
            //再次提交时错误信息先置空，之后再次判断
            $('#envname_repeat').text('');
            $('#ip_repeat').text('');
            $('#remark_repeat').text('');
            $('#runpath_repeat').text('');
            $('#type_repeat').text('');
            $('#backtype_repeat').text('');
            $('#remark_repeat').text('');


            //对提交的数据进行遍历，json解析成数组取第一个值，然后取Bool值，
            // 如果是false(空)，则alert，并且返回空，不继续执行下面代码

            for (let key in data) {
                var item = JSON.parse(data[key])[0]
                var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
                if (Boolean(item) === false && key !== "envid") {
                    var title = $("#" + key).prev().text()
                    $("#" + key + "_repeat").text(title + "不能为空")
                    return;
                } else if (key === 'ip' && reg.test(item) === false) {
                    $('#ip_repeat').text('服务器地址不合法');
                    return;
                } else if (key === 'envname') {
                    //判断环境名的长度是否合法 < 100字节
                    if (item.length > 25) {
                        $('#envname_repeat').text('环境名超出最大长度，请修改环境名！');
                        return;

                    }

                } else if (key === 'remark') {
                    //备注输入框长度未校验（最长长度200个字节）
                    if (item.length > 50) {
                        $('#remark_repeat').text('备注超出最大长度，请修改备注')
                        return;
                    }
                } else if (key === 'runpath') {
                    var regg = /^\/(\w+\/?)+$/
                    //服务器上传目录输入框长度未校验（最长长度100个字节,默认是全英文的）
                    if (item.length > 100 || regg.test(item) === false) {
                        $('#runpath_repeat').text('服务器上传目录不合法，请修改服务器上传目录')
                        return;
                    }

                }

            }

            //点击提交（数据校验完成）后取消模态框， 出现加载中
            fad_envir_modal()
            loadon()
            $.post("{% url 'trade:enviro' %}", data, function (r) {
                //返回数据时，加载中隐藏
                loadoff()
                $("#success-title").text("新建/修改")
                if (r === 'eh') {
                    $("#success-title").text("")
                    $("#msg_success").text("环境名重复！")
                } else if (r === 'iph') {
                    $("#success-title").text("")
                    $('#msg_success').text('ip重复')
                } else {
                    $("#modal_enviro_modify").modal("hide");
                    $("#msg_success").text("操作成功！")
                    $("#enviroTable").bootstrapTable("destroy").bootstrapTable({
                        height: 600,
                        columns: [
                            {
                                field: 'id',
                                title: 'id',
                                visible: false,
                            }, {
                                field: 'envname',
                                width: 80,
                                title: '环境名称',
                            }, {
                                field: 'ip',
                                width: 80,
                                title: '服务器地址'
                            }, {
                                field: 'type',
                                title: '环境类型',
                                width: 60,
                            }, {
                                field: 'backtype',
                                title: '主备类型',
                                width: 60,
                            }, {
                                field: 'runpath',
                                title: '服务器上传目录',
                                width: 120,
                            }, {
                                field: 'remark',
                                width: 120,
                                title: '备注',
                            }, {
                                field: 'eoption',
                                title: '操作',

                                width: 80,
                                formatter: function (value, row, index) {
                                    var enviro_delete = "<span onclick=\"delete_show('" + value + "','" + row.envname + "')\" class='btn btn-danger btn-xs btn-flat btn_operation' data-toggle='modal'> <i class='fa fa-trash'></i> 删除</span> "
                                    var enviro_modify = "<span onclick=\"modify_enviro('" + value + "')\" type='button' class='btn btn-primary  btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_enviro_modify'> <i class='fa fa-edit' ></i> 修改</span> "
                                    return enviro_modify + enviro_delete
                                }
                            },
                        ],
                        data: r,
                        // height: 500,
                        //******前端分页设置****
                        pagination: true,
                        pageNumber: 1,
                        pageSize: 20,
                        pageList: [10, 20, 50, 100],
                        paginationHAlign: "right",
                        paginationDetailHAlign: "left"
                        //******前端分页设置****
                    });
                }
                $("#oper_success").modal("show");
                    setTimeout(function () {
                        $("#oper_success").modal("hide");
                    }, 2000)
            });
        }

        //修改携带参数值
        function modify_enviro(id) {
            $('.modal-title').text('修改环境');
            $("input").val("");
            $("select").val("");
            $(".input-envir").text("")
            $.get("{% url 'trade:enviro' %}", {'envid_modify': id}, function (r) {
                if (r) {
                    var data = (r.rows)[0]
                    for (var key in data) {
                        if ($('#' + key)) {
                            $('#' + key).val(data[key]);
                        }

                    }
                }
            });
        };

        //删除显示
        function delete_show(d, envname) {
            $('.modal-title').text('删除环境');
            $.post("{% url 'trade:enviro' %}", {'id': d, 'delete_enviro': 1}, function (r) {
                if (r === 'h') {
                    $('#enviro_delete_notice').modal('show');
                } else if (r === 'f') {
                    $('#enviro_delete_notice').modal('hide');
                    $("#confirm_env").text('确认删除"' + envname + '"?')
                    $("#modal_enviro_delete").modal('show')
                }
            });//post请求的回调函数，空值show"默认合约不可修改"，y值则删除后跳转。
            {#$('#modal_enviro_delete').modal("show")#}
            $('#del_enviro').attr('sid_enviro', d);
        }

        //环境提醒的删除
        function delete_fad() {
            $('#enviro_delete_notice').modal("hide")
        }

        //环境确认的删除
        function delete_fd() {
            $('#modal_enviro_delete').modal("hide")
        }

        //删除环境逻辑
        function delete_enviro() {


            d = $('#del_enviro').attr('sid_enviro');
            //确定删除后加载中
            delete_fd()
            loadon()
            $.post("{% url 'trade:enviro' %}", {'id': d, 'delete_enviro': 2}, function (r) {
                //收到数据,加载中取消
                loadoff()
                if (r) {
                    $("#msg_success").text("删除成功！")
                    $("#enviroTable").bootstrapTable("destroy").bootstrapTable({
                        height: 600,
                        columns: [
                            {
                                field: 'id',
                                title: 'id',
                                visible: false,
                            }, {
                                field: 'envname',
                                width: 80,
                                title: '环境名称',
                            }, {
                                field: 'ip',
                                width: 80,
                                title: '服务器地址'
                            }, {
                                field: 'type',
                                title: '环境类型',
                                width: 60,
                            }, {
                                field: 'backtype',
                                title: '主备类型',
                                width: 60,
                            }, {
                                field: 'runpath',
                                title: '服务器上传目录',
                                width: 120,
                            }, {
                                field: 'remark',
                                width: 120,
                                title: '备注',
                            }, {
                                field: 'eoption',
                                title: '操作',

                                width: 80,
                                formatter: function (value, row, index) {
                                    var enviro_delete = "<span onclick=\"delete_show('" + value + "','" + row.envname + "')\" class='btn btn-danger btn-xs btn-flat btn_operation' data-toggle='modal'> <i class='fa fa-trash'></i> 删除</span> "
                                    var enviro_modify = "<span onclick=\"modify_enviro('" + value + "')\" type='button' class='btn btn-primary  btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_enviro_modify'> <i class='fa fa-edit' ></i> 修改</span> "
                                    return enviro_modify + enviro_delete
                                }
                            },
                        ],
                        data: r,
                        // height: 500,
                        //******前端分页设置****
                        pagination: true,
                        pageNumber: 1,
                        pageSize: 20,
                        pageList: [10, 20, 50, 100],
                        paginationHAlign: "right",
                        paginationDetailHAlign: "left"
                        //******前端分页设置****
                    });
                } else {
                    $("#msg_success").text("服务器错误！")
                }
                $("#oper_success").modal("show");
                setTimeout(function () {
                    $("#oper_success").modal("hide");
                }, 2000)
            });//post请求的回调函数，空值show"默认合约不可修改"，y值则删除后跳转。
        };

        //查找
        function enviro_search() {
            var envname = $('#envnameS').val();
            var envip = $('#envipS').val();
            var envtype = $('#envtypeS').val();

            data = {
                'envname': envname,
                'envip': envip,
                'envtype': envtype,
            }
            var JsonData = JSON.stringify(data)
            $.post("{% url 'trade:enviro' %}", {"data": JsonData, 'enviro_search': 1}, function (r) {
                $("#enviroTable").bootstrapTable("destroy").bootstrapTable({
                    height: 600,
                    columns: [
                        {
                            field: 'id',
                            title: 'id',
                            visible: false,
                        }, {
                            field: 'envname',
                            width: 80,
                            title: '环境名称',
                        }, {
                            field: 'ip',
                            width: 80,
                            title: '服务器地址'
                        }, {
                            field: 'type',
                            title: '环境类型',
                            width: 60,
                        }, {
                            field: 'backtype',
                            title: '主备类型',
                            width: 60,
                        }, {
                            field: 'runpath',
                            title: '服务器上传目录',
                            width: 120,
                        }, {
                            field: 'remark',
                            width: 120,
                            title: '备注',
                        }, {
                            field: 'eoption',
                            title: '操作',

                            width: 80,
                            formatter: function (value, row, index) {
                                var enviro_delete = "<span onclick=\"delete_show('" + value + "','" + row.envname + "')\" class='btn btn-danger btn-xs btn-flat btn_operation' data-toggle='modal'> <i class='fa fa-trash'></i> 删除</span> "
                                var enviro_modify = "<span onclick=\"modify_enviro('" + value + "')\" type='button' class='btn btn-primary  btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_enviro_modify'> <i class='fa fa-edit' ></i> 修改</span> "
                                return enviro_modify + enviro_delete
                            }
                        },
                    ],
                    data: r,
                    // height: 500,
                    //******前端分页设置****
                    pagination: true,
                    pageNumber: 1,
                    pageSize: 20,
                    pageList: [10, 20, 50, 100],
                    paginationHAlign: "right",
                    paginationDetailHAlign: "left"
                    //******前端分页设置****
                });
            });
        }


    </script>

{% endblock %}